<template>
	<view class="home">
		<view class="home-title">
			<u-swiper :autoplay="true" imgMode="cover" style="height: 100%;" :list="allADList" keyName="image" showTitle
				circular></u-swiper>
		</view>
		<view class="home-yhq">
			<u-cell size="large" title="优惠券" value="查看更多" :border="false" isLink url="/pages/index/allyhq"></u-cell>
			<view class="yhq-one">
				<view class="title">
					{{yhqList.title}}
				</view>
				<view class="content">
					备注：{{yhqList.content}}
				</view>
				<view class="money">
					￥{{yhqList.Money}}
				</view>
			</view>
		</view>
		<view class="home-wz">
			<view class="wz-one" v-for="(item,index) in articleList" :key="index" @click="goodsClick(item)">
				<img :src="item.showImg" alt="" srcset="">
				<view class="wz-text-title">
					{{item.title}}
				</view>
				<view class="wz-text">
					{{item.location}}
				</view>
				<view class="wz-text-money">
					￥{{item.money}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../static/http.js"
	export default {
		data() {
			return {
				title: 'Hello',
				allADList: [],
				yhqList: "",
				articleList:[]
			}
		},
		onLoad() {

		},
		created() {
		},
		onShow() {
			this.getAllAd()
			this.getAllCou()
			this.getAllGoods()
		},
		methods: {
			getAllCou() {
				http.httpRequest("/api/user/getAllCoupon", "", "GET").then(res => {
					if (res.data.length > 0) {
						this.yhqList = res.data[0]
					}
				})
			},
			getAllAd() {
				http.httpRequest("/api/user/getAllAd", "", "GET").then(res => {
					if (res.data.length > 0) {
						res.data.forEach(val => {
							this.allADList.push({
								image: http.BASE_URL + val.imageList[0].url,
								title: val.imageList[0].name
							})
						})
					}
				})
			},
			getAllGoods(){
				http.httpRequest("/article/getGoodsNameAndId","","GET").then(res=>{
					if(res.data.length>0){
						res.data.forEach(val=>{
							val.showImg = http.BASE_URL + val.imageList[0].url
						})
					}
					this.articleList = res.data
				})
			},
			goodsClick(item){
				uni.navigateTo({
					url:"/pages/fx/goods?id="+item.id,
				})
			}
		}
	}
</script>

<style lang="less">
	.home {
		width: 100%;
		background-color: #f0f0f5;

		.home-title {
			width: 100%;
			height: 360rpx;
			background-color: yellow;
		}

		.home-yhq {
			width: 98%;
			height: auto;
			margin: 0 auto;
			padding-top: 15rpx;
			background-color: #fff;
			padding-bottom: 10rpx;

			.yhq-one {
				width: 95%;
				min-height: 100rpx;
				margin: 10rpx auto;
				background-color: #409EFF;
				border-radius: 10rpx;
				-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 

				.title {
					padding: 10rpx;
					font-size: 40rpx;
				}

				.content {
					padding: 10rpx;
					font-size: 30rpx;
					color: #fff;
				}

				.money {
					padding: 10rpx;
					color: #dd6161;
					font-size: 50rpx;
					text-align: right;
				}
			}
		}
		.home-wz{
			width: 98%;
			height: auto;
			margin: auto;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			padding-bottom: 100rpx;
			.wz-one{
				width: 45%;
				height: 400rpx;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				img{
					width: 100%;
					height: 60%;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}
				.wz-text-title{
					width: 100%;
					height: 15%;
					padding: 5rpx;
					padding-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: 600;
				}
				.wz-text{
					width: 100%;
					height: 10%;
					padding-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 25rpx;
				}
				.wz-text-money{
					width: 100%;
					height: 10%;
					padding-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 35rpx;
					color: #dd6161;
				}
			}
		}
	}

	/deep/ .u-swiper__wrapper {
		height: 100% !important;
	}

	/deep/ .u-swiper__wrapper__item__wrapper__image {
		height: 100% !important;
	}
</style>
